<template>
  <el-card style="height: 99%;padding: 0px">
    <p style="margin-left: 10px">首页>菜单管理</p>
    <el-button type="primary" @click="dialogFormVisible=true;addForm={}">添加菜单</el-button>
    <el-table
        :data="tableData"
        border
        style="width: 100%;line-height: 50px;margin-top: 10px;margin-bottom: 10px">
      <el-table-column
          prop="id"
          label="id"
      width="50">
      </el-table-column>
      <el-table-column
          prop="name"
          label="菜名"
      >
      </el-table-column>
      <el-table-column
          prop="img"
          label="展示图">
      </el-table-column>
      <el-table-column
          prop="introduction"
          label="描述">
      </el-table-column>
      <el-table-column
          prop="price"
          label="单价/元">
      </el-table-column>
      <el-table-column
          prop="stock"
          label="库存">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="添加时间">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="toUpdateMenu(scope.row)">编辑菜单</el-button>
          <el-button
              size="mini"
              @click="deleteMenu(scope.row.id)" type="danger">删除菜单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="pageInfo.total"
        :page-size="pageInfo.pageSize"
        @current-change="handleCurrentChange">
    </el-pagination>
    <el-dialog title="添加菜单" :visible.sync="dialogFormVisible">
      <el-form v-model="addForm">
        <el-form-item label="菜单名称" >
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="菜单描述">
          <el-input v-model="addForm.introduction"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="upload-demo"
              drag
              :action="this.$store.state.uploadUrl"
              :on-success="upload"
              limit="1"
              multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="菜单库存" >
          <el-input v-model="addForm.stock"></el-input>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="addForm.price"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMenu();dialogFormVisible=false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="更新菜单" :visible.sync="dialogupdateFormVisible">
      <el-form v-model="updateForm">
        <el-form-item label="菜单名称" >
          <el-input v-model="updateForm.name"></el-input>
        </el-form-item>
        <el-form-item label="菜单描述">
          <el-input v-model="updateForm.introduction"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="upload-demo"
              drag
              :action="this.$store.state.uploadUrl"
              :on-success="upload"
              limit="1"
              multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="菜单库存" >
          <el-input v-model="updateForm.stock"></el-input>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="updateForm.price"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogupdateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateMenu();dialogupdateFormVisible=false">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {doAddMenu, doDeleteMenu, doGetMenuByPage, doUpdateMenu} from "@/api/menu";

export default {
  name: "menuInfo",
  data() {
    return {
      tableData:[
      ],
      pageInfo:{
        total:1,
        pageNum:1,
        pageSize:6
      },
      addForm:{
        name:"",
        introduction:"",
        img:"",
        stock:"",
        price:""
      },
      dialogFormVisible:false,
      dialogupdateFormVisible:false,
      updateForm:{
        id:"",
        name:"",
        introduction:"",
        img:"",
        stock:"",
        price:""
      },
      img:""
    }
  },methods: {
    getMenu(){
          doGetMenuByPage(this.pageInfo.pageNum,this.pageInfo.pageSize).then(res=>{
              if (res.code===200){
                console.log(res)
                  this.pageInfo.total=res.data.total;
                  this.tableData=res.data.records;
              }
          })
      },
    handleCurrentChange(val) {
      this.pageInfo.pageNum=val;
      this.getMenu();
    },
    addMenu(){
      this.addForm.img=this.img;
        doAddMenu(this.addForm).then(res=>{
          if (res.code===200){
            this.getMenu()
            this.addForm={};
          }
        })
    },
    toUpdateMenu(menu){
      this.img=menu.img;
        this.updateForm=menu;
        this.dialogupdateFormVisible=true;
    },
    updateMenu(){
      this.updateForm.img=this.img;
      doUpdateMenu(this.updateForm).then(res=>{
        if (res.code===200){
          this.dialogupdateFormVisible=false;
          this.getMenu();
        }
      })
    },
    deleteMenu(id){
      doDeleteMenu(id).then(res=>{
        if (res.code===200){
          this.getMenu();
        }
      })
    },
    upload(res, file, fileList){
      this.img=res.msg;
    }

  },
  mounted() {
    this.getMenu();
  }
}
</script>

<style lang="less" scoped>

</style>
